<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				/*width: 200px;
				height: 200px;*/
				background: lightpink;
				border-radius: 5px;
				position: absolute;
				overflow: hidden;
				display: none;
			}
			.box .close{
				position: absolute;
				top:10px;
				right: 10px;
			}
			.box h3{
				text-align: center;
				margin-top: 30px;
			}
			.box .cont{
				padding: 0 10px;
			}
		</style>
	</head>
	<body>
		<!--<div class="box">
			<h3>我是标题</h3>
			<hr />
			<span class='close'>X</span>
			<div class="cont">
				我是内容
			</div>
		</div>-->
	</body>
	<script type="text/javascript" src="jquery-3.3.2.min.js" ></script>
	<script type="text/javascript">
		function kf(){
			this.settings={
				width:0,
				height:0,
				pos:'center',
				tit:'我是标题',
				slide:'slideDown'
			}
		};
		kf.prototype.init=function(option){
			for(attr in option){
				this.settings[attr]=option[attr];
			}
			console.log(attr)
			this.creat();
			this.pos();
			this.close();
		}
		kf.prototype.creat=function(){
			this.obj=document.createElement('div');
			this.obj.className='box';
			this.obj.innerHTML='<h3>'+this.settings.tit+'</h3>'
							   +'<hr />'
							   +'<span class="close">X</span>'
							   +'<div class="cont">'
									+'我是内容'
							   +'</div>'
			document.body.appendChild(this.obj);
		};
		kf.prototype.pos=function(){
			this.obj.style.width=this.settings.width+'px';
			this.obj.style.height=this.settings.height+'px';
			if(this.settings.pos=='center'){
				this.obj.style.top=(document.documentElement.clientHeight-this.obj.offsetHeight)/2+'px';
				this.obj.style.left=(document.documentElement.clientWidth-this.obj.offsetWidth)/2+'px';
				if(this.settings.slide=='slideDown'){
					$(this.obj).slideDown();
				}
			}else if(this.settings.pos=='toBR'){
				this.obj.style.right=0;
				this.obj.style.bottom=0;
				if(this.settings.slide=='slideDown'){
					$(this.obj).slideDown();
				}
			}
		}
		kf.prototype.close=function(){
			var oSpan=this.obj.getElementsByClassName('close')[0];
			oSpan.onclick=function(){
				document.body.removeChild(this.parentNode);
			}
		}
		var b1=new kf();
		b1.init(
			{
			width:200,
			height:200,
			pos:'center',
			tit:'请登录',
			slide:'slideDown'
			}
		);
		var b2=new kf();
		b2.init(
			{
				width:200,
				height:300,
				pos:'toBR',
				slide:'slideDown'
			}
		)
	</script>
</html>